import React, { useEffect, useState } from 'react';
import {
    Form,
    Input,
    InputNumber,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete,
    Switch,
    message
} from 'antd';
import { request } from "umi"

const addDish = () => {
    const [list, setList] = useState([]);
    const formItemLayout = {
        labelCol: {
            xs: {
                span: 8,
            },
            sm: {
                span: 8,
            },
        },
        wrapperCol: {
            xs: {
                span: 8,
            },
            sm: {
                span: 8,
            },
        },
    };
    const tailFormItemLayout = {
        wrapperCol: {
            xs: {
                span: 24,
                offset: 0,
            },
            sm: {
                span: 16,
                offset: 8,
            },
        },
    };
    const getData = () => {
        request("http://www.young1024.com:1717/v1/serie/list").then(
            (res) => {
                setList(res.data)
            },
            (err) => { console.log(err); }
        )
    }

    useEffect(() => {
        getData()
    },[])

    const RegistrationForm = () => {
        const [form] = Form.useForm();

        const onFinish = (values) => {
            const param=new URLSearchParams
            param.append("index",values.index)
            param.append("name",values.name)
            param.append("price",values.price)
            param.append("serie",values.class)
            if (values.status) {
                param.append("status",true)
            }else{
                param.append("status",false)
            }
            if(values.imgAddress){
                param.append("imgAddress",values.imgAddress)
            }
            request("http://www.young1024.com:1717/v1/dish/add",{data:param}).then(
                (res)=>{
                    if (res.status==="success") {
                        message.info('添加成功');
                    }
                },
                (err)=>{
                    console.log(err);
                }
            )
        };

        const { Option } = Select;

        return (
            <Form
                {...formItemLayout}
                form={form}
                name="register"
                onFinish={onFinish}
                scrollToFirstError
            >

                <Form.Item
                    name="name"
                    label="名称"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your nickname!',
                            whitespace: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="index"
                    label="序号"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your index!',
                            whitespace: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="price"
                    label="价格"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your price!',
                            whitespace: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="class"
                    label="分类"
                    rules={[{ required: true, message: '选择分类!' }]}
                >
                    <Select placeholder="选择分类">
                        {list.map((item,index) => {
                            return (
                                <Option key={index} value={item._id} serie={item._id}>{item.name}</Option>
                            )
                        })}
                    </Select>
                </Form.Item>

                <Form.Item name="status" label="状态" valuePropName="checked">
                    <Switch />
                </Form.Item>

                <Form.Item
                    name="imgAddress"
                    label="图片"
                    placeholder="请输入图片地址"
                >
                    <Input />
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                </Form.Item>

            </Form>
        );
    };
    return (
        <div style={{ padding: "20px", height: "100%" }}>
            <div style={{ padding: "20px", background: "white", minHeight: "800px" }}>
                <RegistrationForm />
            </div>
        </div>
    )


}
export default addDish;
